<template>
  <path
    v-if="position"
    :style="{stroke}"
    :d="d"
    marker-end="url(#triangle-end-line)"
  ></path>
</template>

<script>
export default {
  props: {
    stroke: String,
    position: Array || null
  },

  computed: {
    d () {
      if (!this.position) return ''
      const { '0': x1, '1': y1, '2': x2, '3': y2 } = this.position
      const cx = x1 + (x2 - x1) / 2
      const cy = y1 <= y2 ? y1 - 80 : y2 - 80
      return `M${x1} ${y1} C${x1} ${y1} ${cx} ${cy} ${x2} ${y2}`
    }
  }
}
</script>

<style>
</style>